<!-- 故障信息 -->
<template>
  <div class="content">
    <!-- 历史故障 -->
    <div>
      <h4 class="title">{{ $t('licence.fau_Title')}}</h4>
      <div>
        <el-select v-model="powerState" :placeholder="$t('licence.his_type0')" style="margin-right: 20px" clearable
          @change="powerStateChanged">
          <el-option v-for="item in typeOptions" :key="item.key" :label="t('licence.his_type' + item.key)"
            :value="item.key">
          </el-option>
        </el-select>

        <el-input v-model="serialNumber" :placeholder="$t('licence.fau_xuliehao')" class="input"></el-input>
        <el-date-picker v-model="timeValue" type="daterange" range-separator="-" :start-placeholder="$t('licence.use_kaishi')"
          :end-placeholder="$t('licence.use_jieshu')" format="YYYY/MM/DD"
           value-format="YYYY-MM-DD" :disabled-date="disabledDate">
        </el-date-picker>
        <el-button @click="getfaultList" type="primary" style="margin: 20px 20px">{{ $t('licence.fau_Thequery')}}</el-button>
      </div>
      <el-table :data="faultData" stripe style="width: 100%" class="tableStyle">
        <el-table-column align="center" prop="num" :label="$t('licence.fau_num')" width="80">
        </el-table-column>
        <el-table-column align="center" :label="$t('licence.fau_equipmentType')" width="180">
          <template #default="scope">
            <p v-if="scope.row.equipmentType == 0">{{ $t('licence.fau_inverter')}}</p>
            <p v-if="scope.row.equipmentType == 1">{{ $t('licence.fau_gateway')}}</p>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="label" :label="$t('licence.fau_sn')" width="180">
        </el-table-column>
        <el-table-column align="center" prop="code" :label="$t('licence.fau_faultId')" width="180">
        </el-table-column>
        <el-table-column align="center" prop="faultDesc" :show-overflow-tooltip="true" :label="$t('licence.fau_faultDesc')">
        </el-table-column>
        <el-table-column align="center" :label="$t('licence.fau_createTime')" width="180">
          <template #default="{ row }">
            {{ format.FormatDate(row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('licence.fau_updateTime')" width="180">
          <template #default="{ row }">
            {{ format.FormatDate(row.updateTime) }}
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('licence.fau_operation')">
          <template #default="{ row }">
            <el-button v-if="row.equipmentType == 0" @click="Toview(row)" type="text" size="small"
              style="color: #305add">{{ $t('licence.fau_Toview')}}</el-button>

            <el-button @click="Tosolve(row)" type="text" size="small" v-if="row.state == 0" disabled
              style="color: #305add">{{ $t('licence.fau_Tosolves')}}</el-button>
            <el-button @click="Tosolve(row)" type="text" size="small" v-else style="color: #305add">{{ $t('licence.fau_Tosolve')}}</el-button>

            <el-button @click="Thefault(row)" type="text" size="small" style="color: #305add">{{ $t('licence.fau_Thefault')}}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页区 -->
    <div class="block" style="margin: 20px">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="queryData.page" :page-size="queryData.pagesize" :page-sizes="[2, 4, 6, 8, 10]"
        layout="sizes, prev, pager, next,total, jumper" :total="queryData.total">
      </el-pagination>
    </div>
    <!-- 解决弹框 -->
    <el-dialog :title="$t('licence.fau_TosolveTitle')" v-model="TosolveShow" width="30%">
      <el-form :model="TosolveForm" ref="Tosolverefs" :rules="rules" label-position="top">
        <el-form-item :label="$t('licence.fau_TosolveSn')">
          <el-input :disabled="true" v-model="TosolveForm.label" autocomplete="off" class="TosolveInput"></el-input>
        </el-form-item>
        <el-form-item :label="$t('licence.fau_TosolveCode')">
          <el-input :disabled="true" v-model="TosolveForm.code" autocomplete="off" class="TosolveInput"></el-input>
        </el-form-item>
        <el-form-item :label="$t('licence.fau_TosolveDesc')">
          <el-input :disabled="true" v-model="TosolveForm.faultDesc" autocomplete="off" class="TosolveInput"></el-input>
        </el-form-item>
        <el-form-item :label="$t('licence.fau_TosolvePlan')" prop="realSolution">
          <el-input v-model="TosolveForm.realSolution" autocomplete="off" class="TosolveInput"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="TosolveShow = false">{{ $t('licence.cancel')}}</el-button>
        <el-button type="primary" @click="determine">{{
          $t('licence.determine')}}</el-button>
      </div>
    </el-dialog>
    <!-- 故障查看 -->
    <el-dialog :title="$t('licence.fau_ToviewTitle')" v-model="ToviewShow">
      <el-button type="primary" style="
          position: absolute;
          top: 12px;
          left: 50%;
          transform: translate(-270px);
        " @click="trendChart">{{ $t('licence.fau_trendChart')}}</el-button>
      <el-table :data="ToviewData" class="ToviewBorder">
        <el-table-column prop="code" :label="$t('licence.fau_faultId')" width="180">
        </el-table-column>
        <el-table-column :label="$t('licence.fau_createTime')" width="260">
          <template #default="{ row }">
            {{ format.FormatDate(row.dataTime) }}
          </template>
        </el-table-column>
        <el-table-column property="current" :label="$t('licence.fau_ToviewA')" width="200"></el-table-column>
        <el-table-column property="voltage" :label="$t('licence.fau_ToviewV')"></el-table-column>
        <el-table-column property="temperature" :label="$t('licence.fau_ToviewC')"></el-table-column>
      </el-table>
    </el-dialog>
    <!-- 故障历史 -->
    <el-dialog :title="$t('licence.fau_ThefaultTitle')" v-model="ThefaultShow" width="60%">
      <el-table :data="ThefaultData" class="ToviewBorder">
        <el-table-column prop="code" :label="$t('licence.fau_faultId')" width="160">
        </el-table-column>
        <el-table-column prop="faultDesc" :label="$t('licence.fau_desc')" width="240">
        </el-table-column>
        <el-table-column :label="$t('licence.fau_createTime')" width="180">
          <template #default="{ row }">
            {{ format.FormatDate(row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('licence.fau_updateTime')" width="180">
          <template #default="{ row }">
            {{ format.FormatDate(row.updateTime) }}
          </template>
        </el-table-column>
        <el-table-column prop="realSolution" :label="$t('licence.fau_realSolution')">
        </el-table-column>
      </el-table>
      <div class="block" style="margin: 20px">
        <el-pagination background @size-change="ThefaulthandleSizeChange" @current-change="ThefaulthandleCurrentChange"
          :current-page="ThefaultqueryData.page" :page-sizeData="ThefaultqueryData.pagesize"
          layout=" prev, pager, next,total, jumper" :total="ThefaultqueryData.total">
        </el-pagination>
      </div>
    </el-dialog>
    <!-- 故障查看的走势图弹框================================= -->
    <el-dialog width="70%" :title="$t('licence.fau_trendChart')" v-model="trendChartShow">
      <div>
        <!-- 数据曲线图 -->
        <!--日则线图 -->
        <div>
          <!-- 发电趋势 -->
          <div class="title" id="title">
            <h3 class="big-title">{{ $t('licence.fau_Trendcurve') }}</h3>
            <div id="TrendcurveData" ref="cqjk" class="curveData"></div>
          </div>
          <!-- 电流电压 -->
          <div class="title" id="title">
            <h3 class="big-title">{{ $t('licence.fau_Voltagecurve') }}</h3>
            <div id="VoltagecurveData" class="curveData"></div>
          </div>
          <!-- 温度 -->
          <div class="title" id="title">
            <h3 class="big-title">{{ $t('licence.fau_Temperaturecurve') }}</h3>
            <div id="TemperaturecurveData" class="curveData"></div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script name="FaultHistory" setup lang="ts">
import format from '@/utils/format'
import * as echarts from "echarts";
import {getfaultRecall,getfaultSolve,getfaultHis,} from "@/api/fault/faultList";
import { getFaultHis } from "@/api/fault/faultHistory";
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
      //禁止选择未来日期
      const disabledDate = (time: Date) => {
        return time.getTime() > Date.now()
      }
      const powerStation = ref({
        id:-1
      }) //获取保存电站信息
      // 查询状态
      const typeOptions = [
        {key: 0,},{key: 1,},{key: 2,},
      ]
      const powerState = ref(0) //查询下拉绑定默认字段
      const serialNumber = ref('') //输入设备序列号绑定
      const timeValue = ref('') //时间选择绑定
      //故障列表
      const faultData = ref ([])
      // 分页
      const queryData = reactive({
        page: 1, // 当前页码
        pagesize: 10,
        total: 0, // 总数
      })
      // 故障查看分页
      const ToviewqueryData = reactive({
        page: 1, // 当前页码
        pagesize: 10,
        total: 0, // 总数
      })
      // 故障历史分页
      const ThefaultqueryData = reactive({
        page: 1, // 当前页码
        pagesize: 10,
        total: 0, // 总数
      })
      // 故障查看
      const ToviewShow = ref(false) //故障查看弹框显示隐藏
      const ToviewData = ref ([])
      const ToviewDataId = ref<number|string>(-1) //故障查看单个id
      // 故障解决表单
      const TosolveShow = ref(false) //故障解决弹框显示隐藏
      const TosolveForm =ref({
        code:'',
        label:"",
        faultId: "",
        faultDesc: "",
        realSolution: "",
      })
      const Tosolverefs= ref()
      const SingleData = ref({
        id:-1
      }) // 故障解决功能单个数据保存
      // 故障历史弹框表单
      const ThefaultShow = ref(false) //故障历史弹框显示与隐藏
      const ThefaultData = ref ([])
      const ThefaultId = ref({
        id:'',
        equipmentType:'',
      })
      // ==============
      // 走势图
      const trendChartShow = ref(false) //走势图弹框
      const lang = ref(0) 
      const rules:ElFormRules= {
        realSolution: [
          {
            required: true,
            message:t("licence.fault_his_real"),
            trigger: "blur",
          },
        ],
      }
  onMounted(()=>{
    // 获取语言
    if (localStorage.getItem("locale") == "en_US") {
      lang.value = 1;
    } else {
      lang.value = 0;
    }
    // 获取电站信息
    powerStation.value = JSON.parse(localStorage.getItem("powerStation") as string);
    // 故障列表
    getfaultList();
  }) 

    // 状态下拉选择事件
    const powerStateChanged= (value:any) => {
      powerState.value = value;
      getfaultList();
    }

    //   查询故障列表
    const getfaultList = async() => {
      let query = {
        stationId: powerStation.value.id,
        label: serialNumber.value.length ? serialNumber.value : "",
        pageNo: queryData.page,
        pageSize: queryData.pagesize,
        lang: lang.value,
        type: powerState.value - 1, //状态 默认全部 -1
        startDate: timeValue.value ? timeValue.value[0] : "", //开始时间
        endDate: timeValue.value ? timeValue.value[1] : "", //结束时间
      };
      let res = await getFaultHis(query);
      faultData.value = res.data.list;
      queryData.total = res.data.total;
    }

    // 分页
    const handleSizeChange = (val:any) => {
      queryData.pagesize = val;
      getfaultList();
    }
    const handleCurrentChange = (val:any) => {
      queryData.page = val;
      getfaultList();
    }

    // 故障查看功能
    const Toview = async(item:any) => {
      ToviewShow.value = true;
      ToviewDataId.value = item.id;
      let query = {
        id: item.id,
        lang: lang.value,
      };
      let res = await getfaultRecall(query);
      ToviewData.value = res.data.mapList;

      // ToviewqueryData.total=res.data.total
    }
    // 故障解决功能
    const Tosolve = (item:any) => {
      TosolveShow.value = true;
      TosolveForm.value = item;
      SingleData.value = item;
    }
    // 故障解决建议确定提交
    const determine = async() => {
      await Tosolverefs.value?.validate();
      let query = {
        id: SingleData.value.id,
        realSolution: TosolveForm.value.realSolution,
        lang: lang.value,
      };
      let res = await getfaultSolve(query);
      ElMessage({
        message: t("licence.sys_tijiao"),
        type: "success",
      });
      TosolveShow.value = false;
      getfaultList();
    }
    // 故障历史功能
    const Thefault = (item:any) => {
      ThefaultId.value = item;
      ThefaultShow.value = true;
      getThefaultData();
    }
    const getThefaultData = async () => {
      let query = {
        id: ThefaultId.value.id,
        equipmentType: ThefaultId.value.equipmentType,
        pageNo: ThefaultqueryData.page,
        pageSize: ThefaultqueryData.pagesize,
        lang: lang.value,
      };
      let res = await getfaultHis(query);
      ThefaultData.value = res.data.list;
      ThefaultqueryData.total = res.data.total;
    }
    // 故障历史分页
    const ThefaulthandleSizeChange = (val:any)  => {
      ThefaultqueryData.pagesize = val;
      getThefaultData();
    }
    const ThefaulthandleCurrentChange = (val:any)  => {
      ThefaultqueryData.page = val;
      getThefaultData();
    }
    // ===============
    // 获取走势图曲线图走势图
    const trendChart = async () => {
      trendChartShow.value = true;
      // 曲线图
      let query = {
        id: ToviewDataId.value,
        lang: lang.value,
      };
      let res = await getfaultRecall(query);
      if (res.data.energyCharts) {
        getTrendcurveData(res.data.energyCharts);
      }
      if (res.data.electricityCharts) {
        getVoltagecurveData(res.data.electricityCharts);
      }
      if (res.data.temperatureCharts) {
        // 默认获取的数据是 res.data.temperatureCharts 是 null 后端数据问题
        // 不需要了
        getTemperaturecurveData(res.data.temperatureCharts);
      }
      // ToviewData.value = res.data.mapList;
    }
    // 发电功率
    const getTrendcurveData = (data:any) => {
      const myChart = echarts.init(document.getElementById("TrendcurveData")as HTMLElement)as echarts.ECharts;
      let dataArr1 = data.series[0].data;
      let dataArr2 = data.series[1].data;
      let intervalY1 = Math.ceil(Math.max(...dataArr1) / 6);
      let intervalY2 = Math.ceil(Math.max(...dataArr2) / 6);
      myChart.setOption({
        // 悬浮提示
        tooltip: {
          show: true,
          trigger: "axis",
          backgroundColor: "#656565",
          textStyle: { color: "#ffffff" },
          extraCssText: "box-shadow: 0px 2px 5px 0px rgba(50,107,174,0.19);",
        },
        legend: {
          itemHeight: 12,
          itemWidth: 12,
          icon: "circle",
          // data: ["发电量", "功率"],
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: data.categories,
        },
        yAxis: [
          {
            type: "value",
            name: data.series[0].unit,
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              formatter: "{value}",
            },

            min: 0,
            max: intervalY1 * 6, // 最大值
            splitNumber: 6, // 坐标轴的分割段数(预估值)
            interval: intervalY1, // 强制设置坐标轴分割间隔。
          },
          {
            type: "value",
            name: data.series[1].unit,
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              formatter: "{value}",
            },
            min: 0,
            max: intervalY2 * 6, // 最大值
            splitNumber: 6, // 坐标轴的分割段数(预估值)
            interval: intervalY2, // 强制设置坐标轴分割间隔。
          },
        ],
        series: [
          {
            name: data.series[0].name,
            data: data.series[0].data,
            type: "line",
            symbol: "none",
            itemStyle: {
              normal: {
                color: "#5079F6",
                lineStyle: {
                  width: 1, //设置线条粗细
                },
              },
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(44,90,221)",
                },
                {
                  offset: 1,
                  color: "rgba(44,90,221,0)",
                },
              ]),
            },
            yAxisIndex: 0, //对应标签yAxis中的第一个数据
          },
          {
            name: data.series[1].name,
            data: data.series[1].data,
            type: "line",
            symbol: "none",
            itemStyle: {
              normal: {
                color: "#E28868",
                lineStyle: {
                  width: 1, //设置线条粗细
                },
              },
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(255,78,20)",
                },
                {
                  offset: 1,
                  color: "rgba(255,78,20,0)",
                },
              ]),
            },
            yAxisIndex: 1, //对应标签yAxis中的第二个数据
          },
        ],
      });
    }
    // -------------------=============================
    // 电压电流
    const getVoltagecurveData = (data:any)  => {
      // 没接参
      const myChart = echarts.init(document.getElementById("VoltagecurveData")as HTMLElement)as echarts.ECharts;
      let dataArr1 = data.series[0].data;
      let dataArr2 = data.series[1].data;
      let intervalY1 = Math.ceil(Math.max(...dataArr1) / 6);
      let intervalY2 = Math.ceil(Math.max(...dataArr2) / 6);
      myChart.setOption({
        // 悬浮提示
        tooltip: {
          show: true,
          trigger: "axis",
          backgroundColor: "#656565",
          textStyle: { color: "#ffffff" },
          extraCssText: "box-shadow: 0px 2px 5px 0px rgba(50,107,174,0.19);",
        },
        legend: {
          itemHeight: 12,
          itemWidth: 12,
          icon: "circle",
          // data: ["电压", "电流"],
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: data.categories,
        },
        yAxis: [
          {
            type: "value",
            name: data.series[0].unit,
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              formatter: "{value}",
            },
            min: 0,
            max: intervalY1 * 6, // 最大值
            splitNumber: 6, // 坐标轴的分割段数(预估值)
            interval: intervalY1, // 强制设置坐标轴分割间隔。
          },
          {
            type: "value",
            name: data.series[1].unit,
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              formatter: "{value}",
            },
            min: 0,
            max: intervalY2 * 6, // 最大值
            splitNumber: 6, // 坐标轴的分割段数(预估值)
            interval: intervalY2, // 强制设置坐标轴分割间隔。
          },
        ],
        series: [
          {
            name: data.series[0].name,
            data: data.series[0].data,
            type: "line",
            symbol: "none",
            itemStyle: {
              normal: {
                color: "#5079F6",
                lineStyle: {
                  width: 1, //设置线条粗细
                },
              },
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(44,90,221)",
                },
                {
                  offset: 1,
                  color: "rgba(44,90,221,0)",
                },
              ]),
            },
            yAxisIndex: 0, //对应标签yAxis中的第一个数据
          },
          {
            name: data.series[1].name,
            data: data.series[1].data,
            type: "line",
            symbol: "none",
            itemStyle: {
              normal: {
                color: "#E28868",
                lineStyle: {
                  width: 1, //设置线条粗细
                },
              },
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(255,78,20)",
                },
                {
                  offset: 1,
                  color: "rgba(255,78,20,0)",
                },
              ]),
            },
            yAxisIndex: 1, //对应标签yAxis中的第二个数据
          },
        ],
      });
    }
    // -------------------------==========================
    // 温度
    const getTemperaturecurveData = (data:any) =>  {
      const myChart = echarts.init(
        document.getElementById("TemperaturecurveData")as HTMLElement)as echarts.ECharts;
      let dataArr1 = data.series[0].data;
      let dataArr2 = data.series[1].data;
      let intervalY1 = Math.ceil(Math.max(...dataArr1) / 6);
      let intervalY2 = Math.ceil(Math.max(...dataArr2) / 6);
      // 因为暂时没数据。可设置为 0 时默认间隔,此处为 1
      intervalY1 = intervalY1 == 0 ? 1 : intervalY1;
      intervalY2 = intervalY2 == 0 ? 1 : intervalY2;
      myChart.setOption({
        // 悬浮提示
        tooltip: {
          show: true,
          trigger: "axis",
          backgroundColor: "#656565",
          textStyle: { color: "#ffffff" },
          extraCssText: "box-shadow: 0px 2px 5px 0px rgba(50,107,174,0.19);",
        },
        legend: {
          itemHeight: 12,
          itemWidth: 12,
          icon: "circle",
          // data: ["电压", "电流"],
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: data.categories, //  null下面没有categories
        },
        yAxis: [
          {
            type: "value",
            name: data.series[0].unit,
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              formatter: "{value}",
            },
            min: 0,
            max: intervalY1 * 6, // 最大值
            splitNumber: 6, // 坐标轴的分割段数(预估值)
            interval: intervalY1, // 强制设置坐标轴分割间隔。
          },
          {
            type: "value",
            name: data.series[1].unit,
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              formatter: "{value}",
            },
            min: 0,
            max: intervalY2 * 6, // 最大值
            splitNumber: 6, // 坐标轴的分割段数(预估值)
            interval: intervalY2, // 强制设置坐标轴分割间隔。
          },
        ],
        series: [
          {
            name: data.series[0].name,
            data: data.series[0].data,
            type: "line",
            symbol: "none",
            itemStyle: {
              normal: {
                color: "#5079F6",
                lineStyle: {
                  width: 1, //设置线条粗细
                },
              },
            },
            yAxisIndex: 0, //对应标签yAxis中的第一个数据
          },
          {
            name: data.series[1].name,
            data: data.series[1].data,
            symbol: "none",
            type: "line",
            itemStyle: {
              normal: {
                color: "#E28868",
                lineStyle: {
                  width: 1, //设置线条粗细
                },
              },
            },
            yAxisIndex: 1, //对应标签yAxis中的第二个数据
          },
        ],
      });
    }
 
</script>

<style scoped lang="scss">
* {
  margin: 0;
  // padding: 0;
  box-sizing: border-box;
}

// 分页
.block {
  // display: flex;
  display: -webkit-box;
  justify-content: end;
}

// 查询按钮
.el-button--primary {
  color: #ffffff;
  background-color: #305add;
  border-color: #305add;
}

// 弹框走势图
#title {
  .time-box {
    margin: -20px 0 20px -10px;
  }

  .big-title {
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 600;
    color: #0e1319;
    margin-bottom: 40px;
    line-height: 30px;
  }
}

.curveData {
  width: 1470px !important;
  height: 560px;
  left: -90px;
  margin-top: -20px !important;
  // background-color: #FFF;
}

.content {
  width: 100%;
  background-color: #fff;
  padding: 20px 20px 30px 20px;
  border-radius: 6px;

  .title {
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 600;
    color: #0e1319;
    // margin-bottom: 24px;
  }

  // 设备序列号
  .input {
    width: 200px;
    // margin-left: 20px;
    margin-right: 20px;
  }
}

// 故障解决弹框
// 弹框样式修改
::v-deep .el-dialog__header {
  border-bottom: 1px solid #ececec;
  text-align: left;
}

::v-deep .el-dialog__title {
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 600;
  color: #0e1319;
}

::v-deep .el-dialog {
  border-radius: 8px;
}

::v-deep .el-form-item__label {
  float: initial;
  margin-left: 12px;
  color: #0e1319;
}

// ===========
// input框的长度
.TosolveInput {
  width: 350px;
}

// .el-input__inner {
//   padding: 0 !important;
// }
// 故障查看弹框  样式修改
.ToviewBorder {
  border: 1px solid #ececec;
}
</style>
<style>
.el-tooltip__popper {
  max-width: 40%;
}
</style>

